<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>弹幕</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .video {
            position: relative;
            height: 400px;
            width: 800px;
            margin: 30px auto;
            background-color: #cdcdcd;
        }

        .video .showcontent {
            position: absolute;
            width: 800px;
            height: 250px;
            left: 0px;
            top: 0px;
            overflow: hidden;
        }

        .video .showcontent p {
            position: absolute;
            width: 800px;
            font-size: 24px;
            font-weight: normal;
            color: #cdcdcd;
            left: 800px;
            top: 0px;
        }

        .content {
            position: relative;
            height: 150px;
            width: 800px;
            margin: 30px auto;
            background-color: #cdcdcd;
        }

        .content .txt {
            position: absolute;
            height: 40px;
            width: 600px;
            left: 20px;
            top: 50%;
            margin-top: -20px;
        }

        .content .btn {
            position: absolute;
            height: 40px;
            width: 100px;
            right: 20px;
            top: 50%;
            margin-top: -20px;
        }
    </style>
</head>
<body>
<div class="video">
    <video width="800px" height="400px" controls autoplay>
    <source src="media/aaa.mp4" type="video/mp4">
    </video>
    <div class="showcontent">
    </div>
</div>
<div class="content">
    <input class="txt" value="真是厉害" onfocus="if(value==defaultValue){ value='';this.style.color='#000'}"
           onblur="if(!value){value=defaultValue;this.style.color='#000'}"/>
    <button class="btn">点击提交</button>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var initTop = 0
        $(".btn").click(function () {
            var txt = $(".txt").val();
            if (initTop > $(".showcontent").height() - 24) {
                initTop = 0;
            }
            var $p = $("<p style='color: red'>" + txt + "</p>");
            $(".showcontent").append($p);
            var width = $(".showcontent").width();
            $p.css({"left": width, "top": initTop});
            initTop += 10;
            show();
        });
        function show() {
            $(".showcontent p").each(function () {
                var left = $(this).width();
                $(this).animate({"left": -left}, setRandom(), function () {
                    $(this).remove();
                });
            });
        }
        function setRandom() {
            return Math.floor(Math.random() * 5) * 1000;
        }
    });

</script>
</html>